<template>
   <div class="detail-container">
      <span><b>基金详情</b></span>
      <BaseDescription :labels="columnDetails" :data="currentDetail" />
      <span class="form-card-title"><b>基金隶属于公司列表</b></span>
      <el-button type="primary" plain size="small" v-for="(item, index) in fetchBelongList" :key="index"
         @click="linkToCompanyDetail(item)">{{ item.companyName }}</el-button>
      <span class="form-card-title"><b>基金条款</b></span>
      <FundClauseDescription :labels="fundClauseColumns" :data="fundClauseDetail" />
      <span class="form-card-title"><b>其他条款</b></span>
      <FundClauseDescription :labels="otherFundClauseColumns" :data="fundClauseDetail" />

      <el-upload class="upload-demo" style="margin: 15px" :action="uploadApi" :show-file-list="false"
         multiple :limit="3" :file-list="fileList" :on-success="uploadSuccess">
         <el-button size="small" type="primary">批量导入基金数据</el-button>
      </el-upload>
      <div v-if="companyId">
         <div class="forms-container">
            <div>
               <div class="form-card-title">内部打分</div>
               <Scoring />
            </div>
            <div label="数据分析">
               <div class="form-card-title">数据分析</div>
               <DataAnalysisTable />
            </div>
         </div>
         <div class="forms-container">
            <div label="">
               <div class="form-card-title">历史业绩</div>
               <HistoricalPerformance />
            </div>
            <div label="回撤分析">
               <div class="form-card-title">回撤分析</div>
               <FallbackAnalysis />
            </div>
         </div>
         <div class="form-card-title">组合月度表现</div>
         <FundMonthly />
      </div>
   </div>
</template>
<script>
import { fetchFundDetail, fetchFundClauseDetail, fetchBelong } from '@/api/fund.js'
import Scoring from './Scoring.vue';
import DataAnalysisTable from './DataAnalysisTable.vue';
import HistoricalPerformance from './HistoricalPerformance.vue';
import FallbackAnalysis from './FallbackAnalysis.vue';
import BaseDescription from '@/components/baseDescription.vue'
import FundMonthly from './FundMonthly.vue';
import FundClauseDescription from '@/components/FundClauseDescription.vue'
const column = [
   {
      name: '公司名称',
      align: 'center',
      with: '120',
      key: 'companyName',
   }, {
      name: '基金AUM',
      align: 'center',
      with: '120',
      key: 'aum',
   }, {
      name: '基金名称',
      align: 'center',
      with: '120',
      key: 'fundName',
   }, {
      name: '主要策略',
      align: 'center',
      with: '120',
      key: 'mainStrategy',
   }, {
      name: '策略AUM',
      align: 'center',
      with: '120',
      key: 'strategyAum',
   },
]

const columnDetails = [
   ...column,
   {
      name: '行业分布',
      align: 'center',
      with: '120',
      key: 'industryDistribution',
   }, {
      name: '地区分布',
      align: 'center',
      with: '120',
      key: 'geographicalDistribution',
   }, {
      name: '基金简介',
      align: 'center',
      with: '120',
      key: 'fundDescription',
   }, {
      name: '平均仓位',
      align: 'center',
      with: '120',
      key: 'averagePosition',
   }, {
      name: '平均净仓位',
      align: 'center',
      with: '120',
      key: 'averageNetPosition',
   }, {
      name: '组合名字数',
      align: 'center',
      with: '120',
      key: 'totalNumberOfHoldings',
   }, {
      name: '组合集中度',
      align: 'center',
      with: '120',
      key: 'topHoldingsPercentage',
   }, {
      name: '组合换手率',
      align: 'center',
      with: '120',
      key: 'turnoverRate',
   }, {
      name: '投资者结构',
      align: 'center',
      with: '120',
      key: 'investorComposition',
   },
]

const fundClauseColumns = [
   { name: '名称/class', key: 'className' },
   { name: '管理费', key: 'management' },
   { name: '业绩费', key: 'performance' },
   { name: '锁定期', key: 'lock' },
   { name: '赎回条款', key: 'redemption' },
   { name: '赎回限制', key: 'restrict' },
   { name: '最低申购额', key: 'minSubscription' },
   { name: '最低追加额', key: 'minAdditional' },
   { name: '申购条款', key: 'subscription' },

]
const otherFundClauseColumns = [
   { name: '经纪商', key: 'broker' },
   { name: '审计', key: 'audit' },
   { name: 'Admin', key: 'admin' },
   { name: '律师', key: 'lawyer' },
]
export default {
   name: '',
   data() {
      return {
         currentDetail: {},
         columnDetails,
         companyId: '',
         fundClauseColumns,
         otherFundClauseColumns,
         fundClauseDetail: [],
         fetchBelongList: [],
         fileList: [],
         uploadApi: process.env.BASE_API + '/fund/import/data/analysis',
      }
   },
   components: {
      Scoring,
      FallbackAnalysis,
      HistoricalPerformance,
      DataAnalysisTable,
      BaseDescription,
      FundClauseDescription,
      FundMonthly
   },
   mounted() {
      const id = this.$route.query.id;
      this.companyId = this.$route.query.companyId;

      fetchFundDetail({ id, companyId: this.companyId }).then(res => {
         this.currentDetail = res.data;
      })

      fetchFundClauseDetail({ id, companyId: this.companyId }).then(res => {
         this.fundClauseDetail = res.data || []
      })

      fetchBelong({ id }).then(res => {
         this.fetchBelongList = res.data || []
      })


   },
   methods: {
      linkToCompanyDetail(item) {
         this.$router.push({ path: '/company/companyDetail', query: { id: item.companyId } })
      },
      uploadSuccess() {
         this.$message.success('导入成功')
      }
   }
};
</script>
<style lang='scss' scoped>
.detail-container {
   padding: 20px;
}

.demo-table-expand {
   font-size: 0;
}

.demo-table-expand label {
   width: 90px;
   color: #99a9bf;
}

.demo-table-expand .el-form-item {
   margin-right: 0;
   margin-bottom: 0;
   width: 50%;
}

.form-line {
   width: 40%;
   border-bottom: solid 1px #e6e6e6;
}

.forms-container {
   display: flex;
}

.forms-container>div {
   width: 50%;
   border: solid 1px #e6e6e6;
}

.form-card-title {
   font-weight: 600;
   padding: 10px;
   display: block;
}
</style>
